<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>待办事项</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="watermark">daydream玄烨</div>
    <div class="container">
        <h1>待办事项</h1>

        <div class="quadrant-container">
            <!-- 任务列表 -->
            <div class="task-list"></div>
            <!-- 坐标系容器 -->
            <div class="coordinate-system-container">
                <!-- 坐标轴系统 -->
                <div class="coordinate-system">
                    <div class="x-axis"></div>
                    <div class="y-axis"></div>
                    <!-- 坐标轴标签 -->
                    <div class="axis-label x-label-right">紧急</div>
                    <div class="axis-label x-label-left">不紧急</div>
                    <div class="axis-label y-label-top">重要</div>
                    <div class="axis-label y-label-bottom">不重要</div>
                </div>
                <!-- 象限背景 -->
                <div class="quadrant" id="quadrant-1"></div>
                <div class="quadrant" id="quadrant-2"></div>
                <div class="quadrant" id="quadrant-3"></div>
                <div class="quadrant" id="quadrant-4"></div>
                <!-- 任务容器 -->
                <div class="tasks-container"></div>
            </div>
        </div>

        <div class="task-form">
            <h2>添加新任务</h2>
            <form id="task-form">
                <div class="form-group">
                    <label for="task-title">任务标题:</label>
                    <input type="text" id="task-title" required>
                </div>
                <div class="form-group">
                    <label for="task-description">任务描述:</label>
                    <textarea id="task-description" required></textarea>
                </div>
                <div class="form-group">
                    <label>象限:</label>
                    <select id="task-quadrant" required>
                        <option value="1">第一象限 (重要且紧急)</option>
                        <option value="2">第二象限 (重要不紧急)</option>
                        <option value="3">第三象限 (不重要但紧急)</option>
                        <option value="4">第四象限 (不重要不紧急)</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="task-deadline">截止时间:</label>
                    <input type="datetime-local" id="task-deadline">
                </div>
                <button type="submit">添加任务</button>
            </form>
        </div>

        <div class="history-container">
            <h2>历史任务</h2>
            <div class="history-tasks"></div>
        </div>

        <div class="footer-links">
            <a href="instruction.html" class="footer-link">查看操作说明</a>
            <a href="changelog.html" class="footer-link">更新日志</a>
            <a href="srcCode.zip" download class="footer-link">下载源代码</a>
        </div>
    </div>

    <div id="task-details-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="modal-task-title"></h2>
            <p id="modal-task-description"></p>
            <div class="modal-buttons">
                <button id="complete-task-btn" class="complete-btn">完成任务</button>
                <button id="edit-task-btn" class="edit-btn">编辑任务</button>
            </div>
        </div>
    </div>

    <div id="edit-task-modal" class="modal">
        <div class="modal-content">
            <span class="close-edit">&times;</span>
            <h2>编辑任务</h2>
            <form id="edit-task-form">
                <div class="form-group">
                    <label for="edit-task-title">任务标题:</label>
                    <input type="text" id="edit-task-title" required>
                </div>
                <div class="form-group">
                    <label for="edit-task-description">任务描述:</label>
                    <textarea id="edit-task-description" required></textarea>
                </div>
                <div class="form-group">
                    <label for="edit-task-deadline">截止时间:</label>
                    <input type="datetime-local" id="edit-task-deadline">
                </div>
                <button type="submit">保存修改</button>
            </form>
        </div>
    </div>

    <div id="confirm-dialog" class="modal">
        <div class="modal-content confirm-content">
            <h3>确认删除</h3>
            <p>确定要删除这个任务吗？</p>
            <div class="confirm-buttons">
                <button id="confirm-yes" class="confirm-btn">确定</button>
                <button id="confirm-no" class="confirm-btn">取消</button>
            </div>
        </div>
    </div>

    <script src="particles.js"></script>
    <script src="script.js"></script>
</body>

</html>